<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<view class="content-box">
			<view class="u-sticky-wrap u-p-b-20" style="background: #f8f8f8">
				<view class="head_box u-flex u-sticky u-flex-col"
					:style="{ position: 'fixed', top: stickyTop + 'px', left: '0px', width:'100%', zIndex: 99 ,'background-color':'#f8f8f8',padding:'0 30rpx 0'}">
					<view class="u-flex u-row-left u-col-center" style="width: 100%;">
						<u-search shape="square" style="width: 100%;" v-model="searchVal" :clearabled="true"
							:bg-color="'#fff'" :search-icon-color="'#333'" :color="'#333'"
							:placeholder-color="'#A8A9A9'" :show-action='false' margin="20rpx 0rpx 20rpx 0rpx"
							placeholder="输入任务名称" height="74"></u-search>
					</view>
				</view>
			</view>
			<view class="u-m-t-100">
				<view class="tablist u-flex u-row-between u-col-center u-m-t-20 u-m-b-20">
					<view class="tab-item u-flex-1 u-flex u-row-center u-p-20 u-col-center"
						:class="taskStatus=='1'?'actived':''" @click="changeStatus('1')">未完成任务({{ uncompletedCount }})</view>
					<view class="tab-item u-flex-1 u-flex u-row-center u-p-20 u-col-center"
						:class="taskStatus=='2'?'actived':''" @click="changeStatus('2')">已完成任务({{ completedCount }})</view>
				</view>
				<view class="collect-list" v-for="(goods, index) in myTaskList" :key="index"  v-if="!isEmpty">

					<u-swipe-action class="choujiangs" :index="goods.id" :disabled="true" :options="options1">
						<view class="zixun-item u-flex u-flex-col u-p-20 u-m-t-20">
							<view class="u-flex u-row-between u-col-center u-w-100s u-m-b-20" @click="openPopup()">
								<view class="u-flex u-row-left" style="width: 85%;">
									<view class="user_img u-m-r-10"></view>
									<view class="zixuntitle u-ellipsis-1">{{ goods.name }}</view>
								</view>
                                <view v-if="goods.position !='管理员'" :class="goods.status?'font-green':'font-red'">{{goods.status=='1'?"进行中":"已结束"}}</view>

                            </view>
							<view class="task-list u-flex u-row-between u-col-center u-m-t-10 u-w-100s"
								@click="openwanchengPopup()">
								<view class="task-list-items u-ellipsis-1">{{goods.project_name}}</view>
								<view class="task-list-items u-ellipsis-1">{{ goods.hasTest=='1'?'测试模式':'训练模式' }}</view>
                                <view class="task-list-items u-ellipsis-1">{{ goods.standard_name }}</view>
                                <view class="task-list-items u-ellipsis-1">{{goods.create_user_name}}</view>
							</view>
							<view class="task-list u-flex u-row-between u-col-center u-m-t-20 u-m-b-20 u-w-100s">
								<view class="task-list-item u-flex u-row-center u-col-center">体测项目</view>
								<view class="task-list-item u-flex u-row-center u-col-center">任务模式</view>
								<view class="task-list-item u-flex u-row-center u-col-center">考核标准</view>
								<view class="task-list-item u-flex u-row-center u-col-center">发布老师</view>
							</view>

							<view class="u-flex u-row-between u-w-100s">
								<view class="zixuntime u-p-t-10 u-p-b-10">发布时间: {{ goods.create_time }}
								</view>
<!--                                v-if="goods.status == '2'"-->
								<view class="tag u-m-l-10"
									@click.stop="toChengji(goods)">
									任务成绩
								</view>
								<!--                                <view class="yichu"></view>-->
							</view>
						</view>
						<template v-slot:right>
							<view @click="showDetel=true;chengyuanItem=goods"
								class="detlebtn u-flex u-row-center u-col-center">
								<u-icon name="trash" size="44">删除</u-icon>
							</view>
						</template>
					</u-swipe-action>
				</view>
                <!-- 数据为空 -->
                <shopro-empty v-if="isEmpty" :image="API_URL()+'images/empty.png'" tipText="暂无任务~">
                </shopro-empty>
                <!-- 更多 -->
                <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />

            </view>

		<!--未开始提示-->
			<shopro-tishi-popup :cancel_text="'确定'" :title="'温馨提示'" :sub_title="'你的任务还未开始哦，赶紧 去运动吧，加油'"
				:sure_show="false" ref="weikaishiPopup"></shopro-tishi-popup>
			<!--结束提示-->
			<shopro-tishi-popup :cancel_text="'确定'" :sub_title="'该任务已结束，任务期间未采集到您的成绩，很抱歉，下次一定记得按时完成任务哦，加油！'"
				:title="'非常抱歉！'" :sure_show="false" ref="wanchengPopup" @sure="closePopup()"></shopro-tishi-popup>

		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	import {
		mapGetters
	} from 'vuex';
    import { API_URL } from '@/env'
	export default {
		components: {},
		data() {
			return {
				stickyTop: 0,
				searchVal: '',
				chengyuanItem: {},
				isEmpty: false,
				isRefresh: true,
				isScorll: false,
				showDetel: false,
				showModal: false,
				myTaskList: [],
				tagList: [],
				tagchecked: '',
				position: "",
				tagindex: '',
				isedit: false,
				options1: [{
					text: '移出',
					style: {
						backgroundColor: '#f8f8f8',
						display: 'flex',
						justifyContent: 'center',
						alignItems: 'center',
						width: '120rpx'
					}
				}],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				total: '',
                taskStatus:'1',
                completedCount:'',
                uncompletedCount:''
			};
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo']),
		},
		created() {
			// 触底监听
			uni.$on('uOnReachBottom', data => {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getmytaskList();
				}
			});
		},
		onShow() {
            this.taskStatus = uni.getStorageSync("taskStatus_student")?uni.getStorageSync("taskStatus_student"):'1';
            this.enable = true;
			this.myTaskList = [];
			this.currentPage = 1;
			this.lastPage    = 1;
			this.loadStatus  = 'loadmore';
            this.getmytaskList();
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {

		},
		mounted() {},
		watch: {},
		methods: {
			openPopup() {
				this.$refs.weikaishiPopup.$refs.deletpopup.open();
			},
            toChengji(goods){
                uni.setStorageSync('taskStatus_student',this.taskStatus);
				let parmas = {
					name:goods.name,
					project_name:goods.project_name,
					hasTest:goods.hasTest,
					standard_name:goods.standard_name,
					create_user_name:goods.create_user_name
				}
	            console.log("===JSON.stringify(goods)",JSON.stringify(parmas))
                this.jump('/pages-kehu/taskchengji',{goods:JSON.stringify(parmas)})
            },
			openwanchengPopup() {
				this.$refs.wanchengPopup.$refs.deletpopup.open();
			},
            changeStatus(type) {
                this.taskStatus = type;
                this.myTaskList = [];
                this.currentPage = 1;
                this.lastPage    = 1;
                this.loadStatus  = 'loadmore';
                this.getmytaskList();
            },

			// 初始化
			init() {
				this.isRefresh = false;
			},
			// 路由跳转
			jump(path, parmas) {
				console.log('-----11111');
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 任务学生列表
            getmytaskList() {
				let that = this;
				that.$http('login.taskList', {
                    status: that.taskStatus,
					page: that.currentPage,
                    pageSize: 10
				}).then(res => {

                    that.myTaskList = [...that.myTaskList, ...res.data];
                    that.isEmpty = !that.myTaskList.length;
                    that.lastPage = res.last_page;
                    that.loadStatus = that.currentPage < res.last_page ? 'loadmore' : 'nomore';
                    that.uncompletedCount = res.uncompletedCount;
                    that.completedCount = res.completedCount;
                });
			},
		}
	};
</script>

<style lang="scss" scoped>
	.home-wrap {
		padding: 0 30rpx 30rpx;
	}

	//nav
	page {
		background: #f8f8f8;
	}

	.userInfo {
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.userleft {
			.usertitle {
				font-size: 30rpx;
			}
		}

		.userright {
			padding: 4rpx 24rpx;
			background: #0081ff;
			border-radius: 45rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			margin: 0;
		}

	}

	.tablist {
		width: 100%;
		border-radius: 38rpx;
		background: #fff;
		font-size: 32rpx;

		.tab-item {
			&.actived {
				background: #3FA897;
				color: #fff;
				border-radius: 38rpx;
			}

		}
	}

	.zixun-item {
		border-radius: 30rpx;
		background: #fff;
		overflow: hidden;

		.zixuntitle {
			color: #333;
			font-size: 30rpx;
		}

		.zixunimg {
			width: 100%;
			height: 180rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.zixuntime {
			color: #cccccc;
			font-size: 24rpx;
		}

		.yichu {
			padding: 16rpx 26rpx;
			border-radius: 34rpx;
			background: #0081ff;
			color: #fff;
		}

		.tag {
			background: #fff;
			color: #3FA897;
			padding: 10rpx 18rpx;
			font-size: 20rpx;
			border-radius: 34rpx;
			border: 2rpx solid #3FA897;
		}

		.task-list {

			.task-list-item {
				width: 25%;
				color: #8E8E8E;
			}

			.task-list-items {
				width: 25%;
				font-size: 34rpx;
				color: #010101;
				text-align: center;
			}
		}
	}

	.detlebtn {
		height: 100%;
		background: #ff0000;
		width: 120rpx;
		border-radius: 20rpx;
	}

	// 提示
	.notice-modal {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 85vw;
		min-height: 358rpx;
		background: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;

		.notice-title {
			width: 100%;
			font-size: 30rpx;
			font-weight: bold;
			color: #46351b;
			text-align: center;
		}

		.notice-detail {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			margin-bottom: 50rpx;
		}

		.back-btn {
			width: 45%;
			height: 70rpx;
			line-height: 70rpx;
			background: #f8f8f8;
			box-shadow: 0 7rpx 8rpx 2rpx #ccc;
			border-radius: 35rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 10rpx;
		}

		.notice-btn {
			width: 45%;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #fff;
			border-radius: 35rpx;
			background: linear-gradient(90deg, #3357DB 0%, #3469E1 47%, #3597F1 100%);
			box-shadow: 0 7rpx 8rpx 2rpx #3597F1;
		}
	}

	.collect-list {
		.choujiangs {
			.zixun-item {
				.user_img {
					width: 16rpx;
					height: 30rpx;
					background: #3FA897;
				}

				.font-green {
					color: #3FA897;
				}

				.font-red {
					color: #FA3E3E;
				}
			}
		}
	}



	// 弹窗
	.modal-box {
		width: 750rpx;
		border-radius: 30rpx 30rpx 0 0;
		background: #fff;

		.modal-head {
			height: 92rpx;
			border-bottom: 1px solid rgba(223, 223, 223, 0.5);
			padding: 0 30rpx;

			.head-title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.modal-content {
			padding: 0 30rpx;

			.into-item {
				width: 24%;
				margin-right: 7rpx;
				padding: 10rpx 0;
				border: 2rpx solid #f3f4f6;
				color: #333;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				&.active {
					color: #fff;
					background: #0081ff;
				}
			}
		}

		.modal-foot {
			font-size: 24rpx;
			padding: 20rpx 0;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			border-top: 1px solid rgba(223, 223, 223, 0.5);

			.back-btn {
				width: 45%;
				height: 70rpx;
				line-height: 70rpx;
				background: #f8f8f8;
				box-shadow: 0 7rpx 8rpx 2rpx #ccc;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 10rpx;
			}

			.notice-btn {
				width: 45%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #fff;
				border-radius: 35rpx;
				background: linear-gradient(90deg, #3357DB 0%, #3469E1 47%, #3597F1 100%);
				box-shadow: 0 7rpx 8rpx 2rpx #3597F1;
			}
		}
	}

	::v-deep .u-swipe-action {
		border-radius: 30rpx;
	}
</style>
